サイトスピードのスクショ

スポンサーリンク

WordPress

設定を見直しただけでサイトスピードを6秒も高速化できた!「レンダリングを妨げる JavaScript や CSS を排除する」は何の事だか分からない!

2017年8月18日

当サイトは「超優秀で使いやすい」と評判のAFFINGER4を使っているのですけどね、何故か「遅い」「重い」って、めっちゃ言われるんです…

今日、この記事を書くにあたって、ちょっと公式サイトを覗いてみたら、色々な機能が全部モリモリ詰め込まれたAFFINGER PACKなる物が販売されていました。

詳細は、公式サイト⇒AFFINGER PACKでご確認頂ければと思いますけど、そんな事より

これ見てもらえます?

アナリティクススクショ

なーにーこーれー?

Googleから「3秒以内にしなさい」って言われてるのに、もうすぐ17秒とか、ヤバくないですか?

私、この時から

フェレットの尻尾
AMP化しない理由とその原因!AFFINGER4なのにパーマリンク設定で詰んだ私の出来なかったこと忘備録!要はスマホで見やすくしたら良いんじゃね?ページ読み込み速度は16秒

Googleから 「関連コンテンツユニットを使って良いですよ」って言われてから早もう数ヶ月 巷に溢れる 「広告が出るまで十日前後」 「7日で広告出た」 とかって、堂々とそれを 「Googleアドセンス ...

続きを見る

そ・れ・な・り・に対処っぽい事してきたのに、何にも変わってないどころか、ちょっぴりずつ、でもか・く・じ・つ・に遅くなってきてるんですけど…

んもうっ!イライラする!!

Googleの評価うんぬんより何より、私が個人的にイヤなんです。

「人を待たす」っていうのがさ。

私は超絶短気なんです。サイトなんてものはさ、サクサク見れなきゃイヤなのっ!

あんまり更年期障害を舐めないで頂きたい!こう見えて、日常的にずっとイライラしてるんだからねっ!

スポンサーリンク

「サイト 高速化 改善」を一週間、本気でググり続けた

まず、こちら、サイトスピードを調べるGoogleの無料ツール(PageSpeed Insights)で調べてみましたらばですね

じゃん

サイトスピードテストスクショ

真っ赤っか!!

「良いとこ無し!改善するとこしか無いよ!」って言われました。

どうやら、これは「上から効果が大きい(ダメ具合がひどい)順に書かれている」そうなんですけどね、一番上からやっていこうと思ったら、のっけから「サーバーの応答時間を短縮する」

は( ¯¯ํ¯__¯¯ํ¯ )い?

そんなのサーバーさんに言ってもらえます?とか、そこまで性根の腐った事は言わず、もちろんググりましたよ。

で、見付けた「ロリポップでwordpressを高速化させる、たった1つの方法」には、こう書いてありました。

「PHP設定を5.6モジュール版」に設定すべし

ほらあった!私にもできる事♡

さっそく実行しようと、ロリポップに行ってみましたらば

php5.6モジュール版

なってるじゃねーか!

あとは「サーバーを変えろ」って、とんでも無くハードル高い提案しか書いてなかったんでそっ閉じして終了。

Googleさんが言う(検索で一番上にあったサイトって意味)「たった1つの方法」はクリアしてますんで、そこんとこちゃんと考慮して下さいね、Googleさん!!(・д・)チッ

はい、次!

画像を最適化する…プラグインをインストールするだけじゃダメだったのか!

こちら、AFFINGER4で、テキストのみのページをテストした結果だそうです

AFFINGER4サイトスピードテストスクショ

「ごっつい速いですね。何も改善する余地はないんじゃないでしょうか。」だって。

じゃあ、私も♡テキスト(文字)のみでサイトを構築していけば良いのね♪

って、なるわけ無いじゃんっ!

だって、ここは「いたちのおうち」だよ?

うちの可愛いエルちゃんとワサビ君をただひたすらに「可愛いでしょ♡」って自慢するブログだよ?

他の多くのニョロリン達を「可愛いねえ♡」って愛でていたいがためのサイトだよ?

「テキストのみ」とか話しにならない。

テキスト(文字)とかむしろ要らないよ。この子達の可愛い写真をたくさんモリモリ貼り付けていたいのっ!

サイト立ち上げ当初(別テーマ使用時)に、巷で話題のパンダのプラグインを使って、全ての写真がピンボケ写真みたいになってしまった(ただ単に自分の設定ミスです。あのプラグインは悪くありません。)トラウマから、あれは怖くて使えません。

だってね、私の周りのニョロリスト達ってばすっごい格好良いカメラでメッチャ可愛い写真を撮る人が多いんです。

最近ではスマホのカメラも優秀ですし、本当に可愛い写真いっぱいなの。

そういう素敵な写真を貸してもらっておいて、いざ投稿したら全部ボンヤリピンボケみたいになってるとか意味分かんないじゃん。

後から「ゴメン。もう一回あの写真、貸して」って言って回ったんですからね!

そんなこんなで、「難しい設定はいらない」ってあっちこっちに書いてある「EWWW Image Optimizer」と「Imsanity」をインストール…

してありますけど?

それぞれの公式にも

EWWW Image Optimizer は画像を最適化することでページのロード速度を向上させます。

とか、

Imsanity automatically resizes huge image uploads down to a size that is
more reasonable for display in browser, yet still more than large enough for typical website use.

Imsanity は自動的に大きなサイズの画像を縮小してくれますよ(私訳)

って書いてあるし、何よりAFFINGER4の公式でも、この2つは「お勧めプラグイン」って書いてあったもん。

念のため、もう一回チェックしに行きましたらば…

Imsanity AFFINGER4での推奨設定

ん?

わざわざ太字で書いてあるって事は、これが大事なことなんでしょ?そうなんでしょ?

細かな使用方法はここでは記載せず紹介のみとなります。気になるプラグインがありましたらググればたくさん情報が出てくるのでぜひ使ってみて下さい。

とか言っといて、ちゃーんと大事なことは教えてくれてる。

本当、親切で有り難い。

⇒AFFINGER4公式ガイド

そのpxとやらの設定を見てみたら「2048」になってました。(驚きすぎてスクショ撮り忘れました)

大急ぎで980にして設定し直し!それこそググってみたらば、どのサイトにも「1024」って書いてあったからこうしてみました。

Imsanity設定

ねえ?

これで合ってるの?

超不安なんですけど…

ここまで、お読み頂いてお分かりだとは思うんですけど、この記事ってば「こうしたら良いよ」とかそういうんじゃないですから。

「そこはこうするんだよ」って教えて下さいって記事ですからね。

これで画像云々は完璧なはず!でもって、お次は

圧縮を有効にする

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。
次のリソースの圧縮を有効にすると、転送サイズを 57 KB(80%)削減できます。

ほら、もう全然、意味が分からない。

zipで思い浮かんだのは、これだけだからね!

朝の情報番組Zipの名物コーナー「MOCO’Sキッチン」での一コマ

斬新すぎるおもてなし料理

速水もこみち 斬新な魚料理

詳細はこちら(画像もここからお借りしてきました):JCASTニュース「速水もこみち、魚にローズマリーを次々突き刺す これで親へのおもてなし料理?」でご確認頂ければと思いますけど、

ババアのワイドショー脳なめんなよ!って話しなんですよ。ったく

言葉(単語)の意味を調べるところから始めました。

ありました!安心の「寝ログ」さんにちゃ~んと書いてありました。

リソースを圧縮して転送サイズを減らしブログを高速化する方法(CSS、JS、WEBフォントなどの圧縮)

中の人(わいひらさん)って、すごく頭が良くて親切な人だって思う。

なぜなら、「難しい言葉で説明しない」の!

ちゃんと、ズブの素人が初めて目にしても全部がその記事だけで理解できるように教えてくれてる。だから、絶大なる信頼を勝手に寄せているのです。

僕のブログで言えば、234.5KB(70%)もサイズを削減できるようです。234.KBといえば、ここのちょっと上で使用している画像(圧縮を有効にすると書いてある画像)が23.8KBなので、その約10倍も削減できることになります。結構なサイズですね。

(略)

その設定をするには、.htaccessファイルに次のように記述します。

って、書いてありました。

ファイルいじるの怖いよー。しかも、わいひらさん、Xサーバーだし。困ったなあ…

と思ったら

「PageSpeed Insightsの提案には以下のように出ています。」って修正案を見せてくれていました。

だから、私も自分のそれを見てみたら…

全部に「rakuten」って書いてありました。

こいつか!

トップページスクショ

可愛いニョロリンを切り取ってしまいたくないから、こんな構図ですけど、この右側の端っこにチマっと載ってる「楽天広告」って書いてあるのの事です。多分。

もともと「今時のサイト感出てカッコイイから、それっぽいのを貼りたい」ってだけの飾りみたいなものです(私はアフィリエイトをやってません)から、即座に削除してやりました。

多分、今はもういないスタッフのそれだと思うんで、関係無し♪

はい、次!

ブラウザのキャッシュを活用する

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。
次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください

また出た「リソース」上載のわいひらさんが教えてくれたから、何となくは把握したけど…

今度は何だってのよ?もう頭痛いよお…

あ!!そういえば!!

AFFINGER4公式に「キャッシュ系プラグインで現在、もっとも扱いやすいプラグインだと思います。」ってあったはず!それの事か?

それを入れたら良いんじゃね?

「WP Fastest Cache」

入ってますけど…?

ついでに言ったら、どこかでお勧めされてた「Autoptimize」も実装済なんですよ。

待てよ…

これってば、「キャッシュを削除」がどうのこうのって書いてあった気がする。「キャッシュを活用」とは違うのか…?

ググりまくりました。

で、その途中で

プラグインを見直そう

って事が大事なんだって知りました。

私ったら、どこかで良いって聞いたらそれをそのまま好き放題いれてまして、何に使ってんだか、どういう役割なのか、設定もしないでそのまま放ったらかしにしてるのいっぱいありまして…

27個も入ってました。

どこかのサイトには

「WordPressのおすすめプラグインは8つだけ。断言します」って書いてありました。

そこには、「ハッキングされるから」とか、「あとプラグインを入れると、そのプラグインを動作させるためのスクリプトが読み込まれるのでサイトパフォーマンスも低下します。」

って書いてあったんです。

スクリプトが何なのかよく分からないけど、「サイトパフォーマンスが低下する」っていうのは「遅くなる」って事だよね?

よし、サクサク削除していこう!

上から1個ずつ「使ってるのか使ってないのか」そこから調べました。

Access Press Anonymous Post

訪問者やログインユーザーが自由に記事を投稿できるプラグインです。
管理者は、投稿を一覧で表示し、管理することができます。
詳細な投稿設定が可能です。

いつの間にか全員が同じIDとパスワードでログインしてるんです、このサイト。だから削除

Amzon JS

アフィリエイトとかやって無い(やり方知らない)から削除

Auto Post Thumbnail

WordPressのアイキャッチ画像を生成するプラグインです。

私は、いつも手動で入れてきました。

そりゃそうでしょう?この子達の可愛い写真をニヤニヤと眺めながら「どれが良いかしら♡」とかやってる時間が超絶幸せなのに、自動で生成とかイミフ。削除

テーマチェック

テーマチェックプラグインはテーマをテストし、最新のテーマレビュースタンダードのスペックへの対応を確認する簡単な方法です。これで、WordPress.org のテーマ提出時に使われているものと全て同じ自動テストツールを、あなたのテーマに対して実行できます。

どう考えても要らない…私が使う事になる日なんて永遠に来ない。削除

アタチはなこ
アタチはなこ
これだけで大分スッキリした気がする

残りの23個は、なんか大事な気がする…

怖いから、「きちんと設定を見直しながら」考えよう…

プラグインの設定をちゃんとする

これってば超基本的な大事なことなんでしょうけど、何て言ったって私は今をときめく「オバちゃん」年齢なんですよ。

だから

「無料です。好きに使って良いですよ。」って言われたら、

「とりあえず全部」その機能を使ってみないと勿体ない気がしちゃうんです。

その結果、

「なんか(テーマとの相性?)で不具合」が出ていたのは知っていました。

会話1の背景色が出ていなかったり、アイキャッチ画像の端っこが切れて白くなってたり、、、

でもそれってば、会話を無限増殖させられるプラグインをAFFINGER4でゲットしてる勝ち組の私には痛くも痒くもない不具合だし、アイキャッチ画像の端っこがちょろっと切れてるくらい、人に指摘されるまで気付きもしなかったそれだし…

「別に良いかな」って思ってたんです。

けど、その理由が

過干渉

かもって、言われて超焦りました。

干渉によって生じる問題として、最悪なのが画面が真っ白になってしまって何もできなくなることです。

その場合は、こちらのページに詳しく修復方法のヒントをまとめていますので参考にしてください。
⇒『WordPressの画面が真っ白になった原因がプラグインの場合』

真っ白ほどひどくはないですが、JavaScriptが動かなくなることもよくあります。

ただ、使っている方としては、JavaScriptが動いていないのが問題であることに気づきにくいです。

そのため、原因に気づくまでに時間がかかるので修復に時間がかかることが多いです。

WordPressの使い方:プラグインが干渉してWordPressの動きがおかしくなった場合

JavaScriptが何なのかは相変わらず知らないけど、何やら大変な事になりそうな予感。

って事であれこれ設定をいじくっている最中にですね

 コメントフォームで画像認証が表示されない不具合

が出てるって、教えて頂きました。

いや、前にもそう教えて頂いて、「なんでかなあ~」ってボンヤリ調べていたのです。

自分でコメントしたら出来ちゃって…

この1つ前の記事とか、ところどころ以前の記事にも「てすと」とかコメントついてるのがそうです。

自分だけしかコメント出来ないってどういう事態…?とか思いながらボサーっとしてての今回。

ちょうど今このタイミングでまた同じご指摘頂いたので、本気出してググりました。

あった!

⇒みちるたび:コメントフォームで画像認証が表示されない不具合について

キャッシュプラグインはPV数が多いサイトには有効ですが、こういう弊害があることは知りませんでした。
とりあえず今のところこのサイトはPV数も少ないので、キャッシュプラグインはこのままやめることにしました。

なるほど。

WP Fastest Cache

で起きている不具合だって書いてありました。

ちゃんと検証もされていました。「超信用できるデータと呼ぶにふさわしい記事!」と思ったので

じゃあ、私もやめようっと♪

Autoptimizeとの加重なんちゃら(仕事が被る)とかもあるって、どこかで見たから、迷うことなくこちらをアンインストールする事にしました。

いっつもお世話になってるサイト作りの女神のサイト

Kanamii:WordPressプラグインとは?使い方・選び方・注意事項など ゼロからのWordPress入門【7】

には、こう書いてありました。

サイトの高速表示をアップさせるキャッシュ系のプラグインは、安易にインストールしない方がよいと思います。

テーマや他のプラグインとの相性もありますし、削除するのにいくつものステップが必要なものもあったりで個人的にはちょっとした恐怖のトラウマがあります。(笑)

それでも、私は入れてみました。

不具合が出て消しました。

…何が起きるかビビってます。

でも良いの!見て♪

サイトスピードテストスクショ

3秒も縮まった♡

大成功!!!!

その他にやった事(基本的な設定を見直す)

いつもパソコンでご覧頂いてる方だけにしか分からない事なのですけどね…

今回から、記事中にある写真が大きくなってるんです。

サイト立ち上げ初期の初期に

「WordPressの設定」を謳う超それっぽいサイトに書いてあった事を鵜呑みにして、メディア設定をそれと同じにしていたんです。

今回ググりまくっていて、そのサイト何回か見ました。

「これが推奨される設定だ」「これで完璧」「当サイトの設定を全て公開」みたいに書いてあったけど、

あんたのサイト違うよね!!って事が今なら分かります。

フェレットの記事の時に、いっつも言ってきてる事…

「あのサイトに書いてあった」

「あの人が言ってた」だけを鵜呑みにしないで下さいね

まさに、これ…

「分からない」ってこういう事なんだよね。

知ったかぶりされて適当な事を言われているのか、

そこに悪意があるのか無いのかなんてどうでも良いけど、とにかく「違っていること」を

平気で「これが正解です」「皆こうしてます」みたいに、ちょっとそれっぽい人に言われたら信じてしまうんだよね…

そして、それが本当に正解かどうかなんて、「それが違ってるって事実に直面しなきゃ、気付かない」んだよね…

私だって、今日の今日まで「なんで私のサイトだけ、パソコンで見たら写真が小さいのかなあ」くらいにしか思ってなかったし…

※分かりやすい比較の為に、moco'sキッチンのスクショだけ、その小さいサイズで載せています。

それでも、「フェレットの可愛いところは余すところなく伝わってるはずだから、ま、良いか!」とか変な納得の仕方してたし…

怖いね…

WordPressのメディア設定

AFFINGERの公式には

AFFINGER公式メディア設定

こうやって出てました。

ちゃんと公式サイト見てない私が悪いんだけどさ←

テーマ(Affinger4)の設定を変更

これを機に、過去記事の画像を張り替えながら、サイトの見直しを少しずつやっていこうかな。って思いながらアレコレいじっていたのです。

2つの画面をこう右と左でパッパッと見比べて…

って、やってる時、「記事幅広いの見づらい!」って急に思ったのです。

これ、本当に私の個人的な主観です。

多分、この当初に

日々精進ロゴ
知識0の素人STINGER利用者はAFFINGER4を使う事にした!分からなくても出来る事がこんなに増えた!

「出る度にパワーアップして使いやすく」 「可愛く」の言葉を散々目にしていたので、 「次はもっとなのね♡」ってカスタム知識を身に付けながら 「STINGER8」ってのを楽しみに待っていました。 これまで ...

意気揚々と「記事幅を広げる」とかそういうのにこだわっていた分、「飽きてきた」だけなんだと思います。

だから、今度は狭めてみました。

狭くしたら、「1.5倍にする」にしてたサムネイルがバランス悪く見えたので標準に戻しました。

あんなにこだわっていた「アドセンスの横並び」も、「縦並びでも良いか」って思いました。

jojo風顔メーカープロフ
AdSense(アドセンス)初心者がSTINGER+で小見出し(h2)上に広告を入れたり記事下広告を横並びにしてみたりして、気を付けなきゃいけなさそうな事の忘備録

あくまでもエルちゃんがメインのこのサイト。上限が無いからってワサワサ広告だらけにする気はありません。 でも、「記事中に広告をいれた方がデキるサイト」に見えるらしいのでミーハー心でさっそくやってみました ...

「ただの気分」です。

SNSボタンも「丸いの可愛い♡」って急に思ったので「シンプルにする」にしました。

これらは別にページの読み込みとか関係無く、気分です

長くなりましたが、毎日、いつでも「少しでも早くなるように」は頭の端っこには置いているつもりですので…

「それ違うよ」って所があったらちゃんと教えて下さいね!

コメント欄ちゃんと使えるようになってますからっ!!!

1ヶ月後には6秒も高速化されてた!

上記のことをして1ヶ月経過した今日(9/18)もう一度Googleの「モバイルサイトの読み込み速度をテストしましょう」でチェックしたら

モバイルのサイトスピード

10秒になってた!!

結果6秒も縮まってました。嬉しいです。

-WordPress
-